import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutterdemo/common/calc.dart';
import 'package:flutterdemo/components/button.dart';
import 'package:flutterdemo/components/img.dart';
import 'package:flutterdemo/components/my_appbar.dart';

class ShopInfo extends StatefulWidget {
  ShopInfo({Key? key}) : super(key: key);

  @override
  _ShopInfoState createState() => _ShopInfoState();
}

class _ShopInfoState extends State<ShopInfo> {
  // 轮播图
  Widget _swiperW() {
    return Container(
        child: AspectRatio(
      aspectRatio: 16 / 9,
      child: Swiper(
        autoplay: true,
        itemBuilder: (BuildContext context, int index) {
          return Img(
              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwebsite201710.oss-cn-shanghai.aliyuncs.com%2Fjnw9%2Fupload%2Fimages%2Fimages12%2F1485610604-1498540402128758.jpg&refer=http%3A%2F%2Fwebsite201710.oss-cn-shanghai.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642233784&t=f1ee1e5d18b88dde0764a28c9d9a3440");
        },
        itemCount: 3,
        pagination: SwiperPagination(),
      ),
    ));
  }

  // 底部图标按钮
  Widget _bottomIcon(String name,IconData icon,callBack) {
    return InkWell(
      onTap: callBack,
      child: Column(
      children: [
        Icon(
          icon,
          color: Colors.black54,
        ),
        Text(
          name,
          style: TextStyle(color: Colors.black54, fontSize: 12),
        ),
      ],
    ),
    );
  }

  // 底部操作栏
  Widget _bottomCtrW() {
    return Ink(
        color: Colors.white,
        child: Padding(
          padding: EdgeInsets.only(top: Calc.width(10),bottom: Calc.width(10)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              _bottomIcon("客服",Icons.help,(){Navigator.pushNamed(context, 'chatInfo');}),
              _bottomIcon("收藏",Icons.favorite_border,(){}),
              _bottomIcon("分享",Icons.share,(){}),
              SizedBox(
                width: Calc.width(20),
              ),
              MyButton(
                "加入收藏",
                onPressed: () {},
              ),
              MyButton(
                "立即购买",
                onPressed: () {},
              ),
            ],
          ),
        ));
  }

  // 名称模块
  Widget _nameContent(){
    return Ink(
      padding: EdgeInsets.all(Calc.width(30)),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(Calc.width(20)),color: Colors.white,),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
        Text("￥78 起",style: TextStyle(color: Colors.red,fontSize: 18),),
        SizedBox(height: Calc.width(15),),
        Text("豪华大推拉 80框,型号xy-g4001",style: TextStyle(fontSize: 20,fontWeight: FontWeight.w700),),
        SizedBox(height: Calc.width(20),),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,

          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  padding: EdgeInsets.fromLTRB(Calc.width(10), Calc.width(4), Calc.width(10), Calc.width(4)),
                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(Calc.width(20)),color: Colors.red,),
                  child: Text("经典好货",style: TextStyle(color: Colors.white,fontSize: 12),),
                ),
                SizedBox(width: Calc.width(5),),
                Text("品牌直销中",style: TextStyle(color: Colors.grey),),
              ],
            ),
            Text("月销2000+",style: TextStyle(color: Colors.grey)),
          ],
        )
      ],),
    );
  }

  // 商品详情
  Widget _shopDetail(){
    return Column(
      children: [
        Text("————商品详情————"),
        SizedBox(height: Calc.height(20),),
        Container(
          child: Img("http://shangguling-live.oss-cn-shenzhen.aliyuncs.com/uploads/20211213/007df9e097e1b71ab96cf164d80be020.jpg"),
        )
      ],
    );
  }

  // 商品选择模块
  Widget _shopAc(){
    return Ink(
      padding: EdgeInsets.all(Calc.width(30)),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(Calc.width(20)),color: Colors.white,),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _shopAcItem("选择","颜色分类"),
          _shopAcItem("保障","正品商家·假一赔十"),
          _shopAcItem("运费","15.00")
        ],),
    );
  }

   Widget _shopAcItem(String name,String content){
     return Row(
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         Text(name,style: TextStyle(color: Colors.grey),),
         SizedBox(width: Calc.width(20),),
         Expanded(
           child: Text(content),
           flex: 1,
         ),
         Icon(Icons.arrow_right)
       ],
     );
   }


  @override
  Widget build(BuildContext context) {
    Calc.init(context);
    return Scaffold(
        backgroundColor: Color.fromRGBO(233, 233, 233, 1),
        appBar: MyAppBar().getAppBar("商品详情"),
        body: Container(
          child: Column(
            children: [
              Expanded(
                child: ListView(
                  physics: BouncingScrollPhysics(),
                  children: [
                    _swiperW(),
                    SizedBox(height: Calc.width(30),),
                    Padding(padding: EdgeInsets.only(left: Calc.width(30),right: Calc.width(30)),
                      child: _nameContent(),
                    ),
                    SizedBox(height: Calc.width(30),),
                    Padding(padding: EdgeInsets.only(left: Calc.width(30),right: Calc.width(30)),
                      child: _shopAc(),
                    ),
                    SizedBox(height: Calc.width(30),),
                    _shopDetail(),
                  ],
                ),
                flex: 1,
              ),
              _bottomCtrW(),
            ],
          ),
        ));
  }
}
